<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/style.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<title>Register</title>
<script type="text/javascript">
	function checkUser() {
		var xhr = new XMLHttpRequest();
		var username = document.getElementById("username").value;
		var register = document.getElementById("registerBtn");
		if(username == ""){
			var show = "<font>用户名不能为空</font>";
			document.getElementById("userinfo").innerHTML = show;
		}else{
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var result = xhr.responseText;
					var back = JSON.parse(result);
					if (!back.status) {
						var show = "<font>该用户名可以使用</font>";
						document.getElementById("userinfo").innerHTML = show;
						register.disabled = false;
					} else {
						var show = "<font color='red'>该用户名已经存在</font>";
						document.getElementById("userinfo").innerHTML = show;
						register.disabled = true;
					}
				}
		}
		}
		xhr.open("post", "client/account", true);
		xhr.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
		xhr.send("action=checkAccount&" + "username=" + username);
	}
	
	function checkPassword(){
		var pwd = document.getElementById("password").value;
		var confirmPwd = document.getElementById("confirmPwd").value;
		if(pwd != confirmPwd){
			var show = "<font color='red'>两次密码输入不一致</font>";
			document.getElementById("pwdcinfo").innerHTML = show;
		}
	}
	
</script>
</head>
<body>
	<div class="container">
		<div class="login-container">
			<h2 class="login-title">Register</h2>
			<form role="form"
				action="${pageContext.request.contextPath }/client/account?action=register" method="post" class="login-form">
				<div class="form-group">
					<label class="sr-only">Username</label> 
					<input type="text" name="username" placeholder="Username..." class="form-control" id="username" onblur="checkUser();">
					<span id="userinfo"></span>
				</div>
				<div class="form-group">
					<label class="sr-only">Password</label> 
					<input type="password" name="password" placeholder="Password..." class="form-control" id="password">
				</div>
				<div class="form-group">
					<label class="sr-only">Password Confirm</label> 
					<input type="password" name="confirmPwd" placeholder="Confirm Password..." class="form-control" id="confirmPwd" onblur="checkPassword();">
					<span id="pwdcinfo"></span>
				</div>
				
				<button type="submit" class="btn btn-primary login-btn" id="registerBtn">Register</button>
				<a href="${pageContext.request.contextPath }/login.jsp" class="btn gray-btn">Login</a>
			</form>
		</div>
	</div>
</body>
</html>